<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    nickName: "Jamie Dimon💯 😊",
    phone: "18888888888",
    gender: "男",
    createdAt: "2021-01-01 00:00:00",
  }, {
    nickName: "Jamie Dimon💯 😊",
    phone: "18888888888",
    gender: "女",
    createdAt: "2021-01-01 00:00:00",
  }
]); 
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['会员管理', '会员列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="会员昵称">
            <umrp-input placeholder="请输入会员昵称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="手机号码">
            <umrp-input placeholder="请输入手机号码"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="注册时间">
            <umrp-datepicker></umrp-datepicker>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card>
      <umrp-table :data="dataList">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="用户头像" slot-name="avatar"></umrp-table-column>
          <umrp-table-column title="用户昵称" data-index="nickName"></umrp-table-column>
          <umrp-table-column title="手机号码" data-index="phone"></umrp-table-column>
          <umrp-table-column title="性别" data-index="gender"></umrp-table-column>
          <umrp-table-column title="注册时间" data-index="createdAt"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
        </template>
        <template #avatar>
          <umrp-avatar></umrp-avatar>
        </template>
        <template #amount="{ record }">
          <umrp-text-price>{{ record.amount }}</umrp-text-price>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary">详情</umrp-button>
          </umrp-space>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>